<template>
  <div class="tab_wrap">
    <div class="comlist" ref="comlist" @scroll="getScroll">
      <ul class="tab" v-show="!isShow" ref="tab">
        <li @click="tabListFoo(undefined, 0)" ref="li">
          <!--  -->

          <a
            :href="`#/${categoryCode}/`"
            :class="code == undefined ? 'active' : ''"
          >
            <span class="txt">全部</span>
            <p class="bar">
              <span class="line"></span>
            </p>
          </a>
        </li>

        <li
          ref="li"
          v-for="(item, i) in tabList"
          :key="item.id"
          @click="tabListFoo(item.code, i)"
        >
          <a :href="`#${item.link}`" :class="code == item.code ? 'active' : ''">
            <span class="txt">{{ item.displayValue }}</span>
            <p class="bar">
              <span class="line"></span>
            </p>
          </a>
        </li>
      </ul>
      <div class="tt_com" v-show="isShow">请选择分类</div>
    </div>
    <div class="box" @click="open">
      <van-icon class="arrow-up" name="arrow-up" v-if="isShow" />
      <van-icon name="arrow-down" v-else />
    </div>

    <div class="fenlei" v-if="isShow">
      <ul class="tt_box">
        <li @click="tabSelect(undefined, 0)">
          <!--  -->
          <a
            :href="`#/${categoryCode}/`"
            :class="code == undefined ? 'active' : ''"
          >
            全部
          </a>
        </li>

        <li
          v-for="(item, i) in tabList"
          :key="item.id"
          @click="tabSelect(item.code, i)"
        >
          <a :href="`#${item.link}`">
            {{ item.displayValue }}
          </a>
        </li>
      </ul>
    </div>

    <my-load v-if="a"></my-load>
  </div>
</template>

<script>
import { initTingData } from "@/request/api.js";

import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      isShow: false,
      a: true,
      distance: 0,
      index: 0,
      newIndex: 0,
      oldIndex: 0,
      name: "",
      flag: true,
    };
  },
  props: {
    tabList: {
      type: Array,
    },
    code: {
      type: String,
    },
    categoryCode: {
      type: String,
    },
  },
  watch: {},
  created() {
    // this.name = this.$rouer.params
    console.log(this.$route.params.name);
    this.name = this.$route.params.name;

    // this.$nextTick(()=>{
    //   if(this.name){
    //     if(this.tabList){
    //       this.tabList.some((item,index)=>{
    //         if(item.code == this.name){
    //           this.index = index
    //           console.log("xxx==>",item.code)
    //           return
    //         }
    //       })
    //     }
    //   }
    // })
  },
  watch: {
    tabList: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val.length > 0) {
          this.a = false;

          this.$nextTick(() => {
            if (this.name && this.flag == true) {
              val.some((item, index) => {
                if (item.code == this.name) {
                  this.index = index;
                  this.$refs.comlist.scrollLeft =
                    this.$refs.li[index].offsetLeft;
                  this.flag = false;
                  console.log("xxx==>", index, this.$refs.comlist.scrollLeft);
                  return;
                }
              });
            }
          });
        } else {
          this.a = true;
        }
      },
    },
    isShow(val) {
      if (!val) {
        this.$nextTick(() => {
          this.$refs.comlist.scrollLeft = this.distance;
        });
      }
    },
    index(newVal, oldVal) {
      this.newIndex = newVal;
      this.oldIndex = oldVal;
    },
  },
  computed: {
    ...mapState(["catedis"]),
  },
  methods: {
    ...mapMutations(["saveCateDis"]),
    open() {
      this.isShow = !this.isShow;
    },
    tabListFoo(code, i) {
      // console.log(this.$refs.comScroll.scrollLeft)
      this.index = i;
      this.$emit("tab-list", { code: code });
    },
    tabSelect(code, i) {
      console.log("索引值", i);
      this.index = i;
      this.isShow = false;
      this.$emit("tab-select", { code: code });
      this.scrollFoo(i, code);
    },

    scrollFoo(i, code) {
      this.$nextTick(() => {
        let dis = this.$refs.comlist.scrollLeft;
        let tab = this.$refs.comlist.offsetWidth - this.$refs.li[i].offsetWidth;
        console.log(tab);
        console.log("新", this.newIndex);
        console.log("旧", this.oldIndex);
        if (this.newIndex - this.oldIndex >= 4) {
          this.$refs.comlist.scrollLeft = this.$refs.li[i].offsetLeft - tab;
          console.log("大于4==>", this.$refs.li[i].offsetLeft - tab);
          console.log("大于4");
        } else if (this.newIndex - this.oldIndex <= -4) {
          this.$refs.comlist.scrollLeft = this.$refs.li[i].offsetLeft;
        } else {
          if (
            this.$refs.li[i].offsetLeft + this.$refs.li[i].offsetWidth >
            this.$refs.comlist.offsetWidth
          ) {
            this.$refs.comlist.scrollLeft = this.$refs.li[i].offsetLeft - tab;
          }
        }

        if (i == 0 && code == undefined) {
          this.distance = 0;
          this.saveCateDis(0);
        } else {
          this.distance = this.$refs.comlist.scrollLeft;
          this.saveCateDis(this.$refs.comlist.scrollLeft);
        }
      });
    },

    getScroll() {
      if (this.isShow) {
        return;
      } else {
        this.distance = this.$refs.comlist.scrollLeft;
        this.saveCateDis(this.$refs.comlist.scrollLeft);
      }
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.comlist::-webkit-scrollbar {
  display: none;
}

.tab_wrap {
  justify-content: space-between;
  display: flex;
  position: relative;
  border-bottom: 1px solid #e8e8e8;
  .box {
    margin-top: 13px;
    height: 30px;
    width: 43px;
    border-left: 1px solid #e8e8e8;
    // border-bottom: 1px solid #e8e8e8;
    text-align: center;
    line-height: 30px;
    color: #a3a3ac;
    font-size: 16px;
    .arrow-up {
      color: #f06742;
    }
  }

  .comlist {
    width: 84.6%;
    // width: 100%;
    padding-right: 44px;
    height: 45px;
    overflow-x: auto;
    // border-bottom: 1px solid #e8e8e8;
    .tab {
      height: 100%;
      display: flex;
      li {
        flex-shrink: 0;
        height: 100%;
        a {
          height: 100%;
          display: block;
          padding: 0 15px;
          height: 45px;
          line-height: 45px;
          position: relative;
          transition: all 0.3s ease;
          .txt {
            color: #a3a3ac;
            font-size: 14px;
          }

          .bar {
            position: absolute;
            height: 3px;
            width: 100%;
            left: 0;
            bottom: 0;
            display: none;
            .line {
              display: block;
              width: 58%;
              margin: 0 auto;
              height: 3px;
              background-color: #f06742;
            }
          }
        }

        a.active .txt {
          color: #40404c;
          font-size: 18px;
        }

        a.active .bar {
          display: block;
        }
      }
    }
    .tt_com {
      line-height: 45px;
      font-size: 14px;
      color: #a3a3ac;
      padding-left: 15px;
    }
  }
  .fenlei::-webkit-scrollbar {
    display: none;
  }
  .fenlei {
    position: absolute;
    top: 45px;
    left: 0px;
    width: 100%;
    height: 345px;
    background-color: #fff;
    z-index: 1000;
    padding: 15px;
    overflow-y: auto;
    border-bottom: 1px solid #e8e8e8;
    border-top: 1px solid #e8e8e8;
    .tt_box {
      display: flex;
      flex-wrap: wrap;
      a {
        margin: 0 12px 16px 0;
        display: inline-block;
        width: 102px;
        height: 32px;
        border-radius: 4px;
        text-align: center;
        line-height: 32px;
        font-size: 16px;
        background-color: #f3f4f5;
        color: #40404c;
      }
    }
  }
}
</style>

